<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初体验</title>
</head>
<body>
  <div class="container">
    <h2 class="page-header">Promise 初体验</h2>
    <button id="btn">点击抽奖</button>
  </div>
  <script>
    // 实现功能：点击抽奖按钮，2s 后显示是否中奖，若中奖，弹出恭喜中奖；若未中奖，弹出再接再厉。注：中奖概率为 30%。

    // 分析：通过生成随机数来实现中奖概率，生成 1～100 的数，若中奖概率为 30%，则生成数小于 30 为中奖，大于 30 为未中奖。

    // 生成随机数函数：生成 [n-1, m] 之间的随机整数 ps：Math.random() 返回 [0, 1) 的数、Math.ceil(num) 对数进行向上舍入
    function rand(m, n) {
      return Math.ceil(Math.random() * (n - m + 1)) + m - 1; // m=2,n=100 [1, 100]
    }

    // 获取按钮元素
    const btn = document.getElementById('btn');

    // 给按钮绑定点击事件
    btn.onclick = function() {
      // 用 Promise 的形式实现
      const p = new Promise((resolve, reject) => {
        console.log('Promise start')
        setTimeout(() => {
          let num = rand(1, 100);
          if (num < 30) {
            resolve('恭喜中奖！' + ' 注：您抽奖的随机数为' + num); // [成功]状态返回数据
          } else {
            reject('再接再厉！' + ' 注：您抽奖的随机数为' + num); // [失败]状态返回数据
          }
        }, 2000);
        console.log('Promise end')
      }).then(value => {
        console.log('Promise success')
        alert(value); // 弹出成功数据
      }, reason => {
        console.log('Promise fail')
        alert(reason); // 弹出失败数据
      });
      // 控制台打印 Promise 对象
      console.log('promise:',p);
    }
  </script>
</body>
</html>